<template>
	<div
		style="background: url('../static/img/bg.jpg') repeat fixed center;width: 100vw;height: 100vh;padding: 40rpx;box-sizing: border-box;">
		<div style="padding-top: 40px;">
			<div style="font-weight: 600;font-size: 30px;color: #fff;">欢迎登录行大运</div>
		</div>
		<div style="padding: 80px 0 0 0;display: flex;justify-content: space-around;">
			<div style="background: #fff;border-radius: 10px;padding: 50rpx 40rpx;width: calc(100vw - 160rpx);">
				<tm-form @submit="onsubmit" v-model="formData" :rules="rules" :gap='20'>
					<tm-form-item name="username" :required="false" :show-label="false">
						<tm-input v-model="formData.username" show-clear></tm-input>
					</tm-form-item>
					<tm-form-item name="password" :required="false" :show-label="false">
						<tm-input password v-model="formData.password" showEye></tm-input>
					</tm-form-item>
					<tm-button form-type="submit" block>{{flag===0?'注册':"登录"}}</tm-button>
				</tm-form>
			</div>
		</div>
		<div style="display: flex;justify-content: space-between;color: #fff;margin-top: 5px;">
			<div></div>
			<div @click="regOrLogin" v>{{flag===0?'返回登录':"没有账号？注册"}}</div>
		</div>
	</div>

	<tm-message ref="msg" :lines="3"></tm-message>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { sha256Hash } from '../utils/sha256'

	import { register, login } from "../api/user"

	import type { responseType } from "../type"

	const flag = ref(1)//0是注册，1是登录
	const msg = ref<any>(null)

	const formData = reactive({
		username: '13011111111',
		password: '12345678'
	})

	const rules : Record<string, TM.FORM_RULE[]> = {
		username: [{ required: true, message: '请输入正确的手机号码', type: 'phone' }],
		password: [{ required: true, message: '数字或者字母6-18位', rule: /^[a-zA-Z0-9]{6,18}$/ }]
	}



	const regOrLogin = () => {
		if (flag.value === 0) {
			flag.value = 1
		} else {
			flag.value = 0
		}
	}
	const onsubmit = async (e : TM.FORM_SUBMIT_RESULT) => {
		if (e.isPass) {
			let password = await sha256Hash(formData.password)
			let params = {
				username: formData.username,
				password
			}
			if (flag.value === 0) {
				// 注册
				let { isSuccess } = await register(params)
				if (isSuccess) {
					msg.value.show({ model: 'success' })
				}
			} else {
				let res = await login(params)
				console.log(2222, res)
				// 登录
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>